<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function $$(id){
				return document.getElementById(id)
			}
			window.onload=function(){
				var cnv=$$("canvas")
				var cxt=cnv.getContext("2d")
				
				var i=0
				var rectWidth=100
				var rectHeight=50
//				var image=document.getElementById("img")
				var image=new Image()
				image.src="img/2.jpeg"
				image.onload=function(){
					cxt.drawImage(image,10,0)
//					cxt.drawImage(image)
					setInterval(function(){
						i++
						cxt.clearRect(0,0,cnv.width,cnv.height)
						cxt.save()
						cxt.translate(250,250)
						cxt.rotate(Math.PI*(i/100))
						cxt.drawImage(image,0,0)
						cxt.restore()
					},10)
				}
				
			}
		</script>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500" style="border:1px dashed gray;"></canvas>
		<!--<img id="img" src="img/2.jpeg"alt=""/>-->
	</body>
</html>
